save account settings

3 files changed, 59 insertions, 26 deletions

diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 1d162ef2..c6d7d3c0 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -5,6 +5,8 @@
 
 	import { AppHeader, Icon } from '$comp';
 	import { t } from '$lib/translations';
+	import { failure, success, put } from '$lib/utils';
+	import { user } from '$lib/store';
 
 	let tab = 'account';
 
@@ -15,29 +17,42 @@
 	];
 
 	$: ({ comp } = tabs.find((t) => t.name === tab));
+
+	let save = async () => {
+		try {
+			await put('/user', $user);
+			success('Settings saved');
+		} catch (e) {
+			failure('Something went wrong');
+		}
+	};
 </script>
 
 <AppHeader />
 
-<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
-	<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
-		{$t('user.settings.header')}
-	</h1>
-
-	<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
-		{#each tabs as { name, key }}
-			<button class:text-black={tab === name} on:click={() => (tab = name)}
-				>{$t(`user.settings.${key}`)}</button
-			>
-		{/each}
-	</div>
+<form on:submit|preventDefault={save}>
+	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
+			{$t('user.settings.header')}
+		</h1>
 
-	<svelte:component this={comp} />
-</div>
+		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
+			{#each tabs as { name, key }}
+				<button class:text-black={tab === name} on:click|preventDefault={() => (tab = name)}
+					>{$t(`user.settings.${key}`)}</button
+				>
+			{/each}
+		</div>
 
-<div class="fixed bottom-0 bg-white shadow border w-full">
-	<button class="rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto">
-		<Icon icon="save" style="m-auto mr-2" />
-		<div class="my-auto">Save Settings</div>
-	</button>
-</div>
+		<svelte:component this={comp} />
+	</div>
+	<div class="fixed bottom-0 bg-white shadow border w-full">
+		<button
+			type="submit"
+			class="rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto hover:bg-primary"
+		>
+			<Icon icon="save" style="w-6 h-6 mr-1" />
+			<div class="my-auto">Save Settings</div>
+		</button>
+	</div>
+</form>
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index 2ce78554..68af0841 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -3,9 +3,9 @@
 	import { Icon, Toggle, LocaleSelector } from '$comp';
 	import { t } from '$lib/translations';
 
-	let password;
 	let selectedTheme = 1;
 	let revealPassword = false;
+	let password;
 
 	const colorThemes = [
 		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
@@ -15,6 +15,13 @@
 		{ theme: 5, color1: 'from-[#F3E7E9]', color2: 'to-[#E3EEFF]' },
 		{ theme: 6, color1: 'from-[#F5F7FA]', color2: 'via-[#EAF2FF] to-[#DEDFFF]' }
 	];
+
+	const handleThemeClick = (colors) => {
+		selectedTheme = colors.theme;
+		$colorTheme = colors.color1 + ' ' + colors.color2;
+	};
+
+	$: $user.password = $user.confirm = password;
 </script>
 
 <div>
@@ -24,7 +31,12 @@
 
 <div>
 	<label for="email" class="font-bold mb-1 block">{$t('user.settings.email')}</label>
-  <input type="email" name="email" class="block border rounded-xl p-3 w-full" bind:value={$user.email} />
+	<input
+		type="email"
+		name="email"
+		class="block border rounded-xl p-3 w-full"
+		bind:value={$user.email}
+	/>
 </div>
 
 <div>
@@ -32,7 +44,7 @@
 	<input
 		type="text"
 		name="username"
-		value={$user.username}
+		bind:value={$user.username}
 		class="block border rounded-xl p-3 w-full"
 	/>
 </div>
@@ -55,7 +67,12 @@
 
 <div>
 	<label for="address" class="font-bold mb-1 block">{$t('user.settings.businessAddress')}</label>
-	<input type="text" name="address" class="block border rounded-xl p-3 w-full" />
+	<input
+		type="text"
+		name="address"
+		class="block border rounded-xl p-3 w-full"
+		bind:value={$user.address}
+	/>
 </div>
 
 <div>
@@ -83,6 +100,7 @@
 	<p class="text-secondary mb-1">{$t('user.settings.themeDescription')}</p>
 	{#each colorThemes as colors}
 		<button
+			type="button"
 			class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
 			colors.theme
 				? 'border-black'
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index 197317fc..78b63497 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -8,7 +8,7 @@
 	<p class="text-secondary mb-1">
 		{$t('user.settings.securityPINDescription')}
 	</p>
-	<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
+	<button type="submit" class="p-3 border rounded-3xl font-bold flex justify-center items-center"
 		><Icon icon="lock" style="mr-1" /> {$t('user.settings.setPIN')}</button
 	>
 </div>
@@ -32,7 +32,7 @@
 	<p class="text-secondary mb-1">
 		{$t('user.settings.twofaDescription')}
 	</p>
-	<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
+	<button type="submit" class="p-3 border rounded-3xl font-bold flex justify-center items-center"
 		><Icon icon="mobile" style="mr-1" /> {$t('user.settings.twofaSetup')}</button
 	>
 </div>